<template>
	<view class="conter">
		<view class="bgimage">
			<!-- 背景图 -->
		</view>
		<view class="icon_box">
			<u-icon color="#fff" bold size="20" @click="handleGoBack" class="left" name="arrow-left"></u-icon>
		</view>
		<view class="tas">
			<u-tabs style="margin: 10rpx 5rpx" lineColor="#46A6F8" :activeStyle="{
                    color: '#46A6F8',
                    transform: 'scale(1.1)'
                }" :inactiveStyle="{
                    color: '#fff '
                }" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<swiper :current="current" @change="changeSwiper" duration="300">
			<swiper-item>
				<cduck></cduck>
			</swiper-item>
			<swiper-item>
				<duckEgg></duckEgg>
			</swiper-item>
			<swiper-item>
				<stripping></stripping>
			</swiper-item>
			<swiper-item>
				<Jewelry></Jewelry>
			</swiper-item>
			<swiper-item>
				<Island></Island>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		getserviceChargeApp
	} from '@/api/consignment/consignment.js';
	import config from '@/config';
	import cduck from '../../components/collecthouse/cduck.vue';
	import stripping from '../../components/collecthouse/stripping.vue';
	import duckEgg from '../../components/collecthouse/duckEgg.vue';
	import Jewelry from '../../components/collecthouse/Jewelry.vue';
	import Island from '../../components/collecthouse/Island.vue';
	export default {
		components: {
			cduck,
			stripping,
			duckEgg,
			Jewelry,
			Island
		},
		data() {
			return {
				imgUrl: config.gillUrl,
				imgUrl: config.imgUrl,
				list: [{
						name: '加密鸭'
					},
					{
						name: 'Duck-蛋'
					},
					{
						name: '金豆'
					},
					{
						name: '饰品'
					},
					{
						name: '岛屿'
					}
				],
				current: 0
			};
		},
		created() {
			this.getserviceCharge()
		},
		methods: {
			handleGoBack() {
				uni.switchTab({
					url: '/pages/work/home'
				});
			},
			change(index) {
				this.current = index.index;
			},
			changeSwiper(event) {
				this.current = event.detail.current;
			},
			async getserviceCharge() {
				const data = await getserviceChargeApp();
				uni.setStorageSync('COST', data.data[0].cost);
			},
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep .uni-swiper-wrapper {
		width: 100%;
		height: 1200rpx !important;
	}
	.conter {
		position: relative;

		.bgimage {
			width: 750rpx;
			height: 387rpx;
			background-image: url(../../static/images/bgimage.png);
			background-size: cover;
		}

		.icon_box {
			position: absolute;
			top: 80rpx;
			left: 34.88rpx;
		}

		.tas {
			width: 750rpx;
			height: 109.88rpx;
			padding: 5rpx 15rpx;
			box-sizing: border-box;
			background: #1c213a;
			margin-top: -80rpx;
			border-radius: 17rpx 17rpx 0rpx 0rpx;
		}
	}
</style>